<!-- 编辑 -->
<template>
    <div >
        <el-dialog
        v-model="dialogVisible"
        title="创建用户资料信息"
        width="50%"
        :before-close="handleClose"
        >
           <div class="useradd_1">
                 <!-- 左 -->
            <div class="useradd_2">
                <div>
                    用户名：<el-input v-model="input1" placeholder="请输入用户名" clearable  style="width:200px; margin-top: 15px;"/>
                </div>
                <div>
                    密码：&nbsp;&nbsp;&nbsp;<el-input v-model="input2" placeholder="请输入密码" clearable style="width:200px ;margin-top: 15px;"/>
                </div>
                <div>
                    管理员分类：<el-select v-model="value1" class="m-2" placeholder="请选择类别" style="margin-top: 15px;">
                    <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :value="item.value"
                    />
                </el-select>
                </div>
                <div>
                    员工姓名<el-input v-model="input3" placeholder="请输入名字" clearable style="width:200px ;margin-top: 15px;"/>
                </div>
                
            </div>
                <!-- 右 -->
            <div class="useradd_3">
                <div>
                部门名称：<el-select v-model="value" class="m-2" placeholder="请选择部门" style="margin-top: 15px;">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :value="item.value"
                    />
                </el-select>
                </div>
                <div>
                    职位名称：<el-input v-model="input4" placeholder="请输入职位" clearable  style="width:200px;margin-top: 15px;"/>
                </div>
                <div class="demo-date-picker">
                    <div class="block">
                    <span class="demonstration">时间：</span>
                    <el-date-picker
                        v-model="value2"
                        type="date"
                        placeholder="请选择日期"
                    />
                    </div>
                </div>
                <div>
                    职务类别：<el-select v-model="input4" class="m-2" placeholder="请选择类别" style="margin-top: 15px;">
                    <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :value="item.value"
                    />
                </el-select>
                </div>
                
            </div>
           </div>
          
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="queren "
                    >确认</el-button
                >
                </span>
            </template>
        </el-dialog>
    </div>
    
  </template>
  
  <script lang="ts">
// import { watch } from 'fs'
import { ref,defineComponent,computed,reactive,onMounted,watch} from 'vue'
   export default defineComponent({
    name:'UserControlAdd',
    props:['isshowConlook',"rowdata"],
        setup(props,cxt){
            let input1 = ref("")
            let input2 = ref('')
            let input3 = ref('')
            let input4 = ref('')
            let value = ref('')
            let value1= ref('')
            let value2= ref('')
            onMounted(() => {              
                watch(()=>props.rowdata,(newValue)=>{
                    input1.value = newValue.username;
                    input2.value = newValue.password;
                    value1.value = newValue.admin;
                    input3.value = newValue.staffname;
                    value.value = newValue.depname;
                    input4.value = newValue.zwlb
                    value2.value = newValue.date
                })
            })
            let options:Array<{
                value:string
                }> =reactive([
                    { value: '总经办'},
                    { value: '业务部'},
                    { value: '资源部'},
                    { value: '研发部'},
                    { value: '人事部'},
                    { value: '制作部'},
                    { value: '阅港'},
                ])
            let options1:Array<{
                value:string
                }> =reactive([
                    { value: '总经理'},
                    { value: '副经理'},
                    { value: '大区经理'},
                    { value: '省经理'},
                    { value: '销售经理'},
                    { value: '销售助理'},
                    { value: '销售代表'},
                    { value: '人事经理'},
                    { value: '人事主管'},
                    { value: '人事助理'},
                    { value: '资源经理'},
                    { value: '资源助理'},
                    { value: '资源主管'},
                    { value: '资源代表'},
                    { value: '技术总监'},
                    { value: '技术经理'},
                    { value: '技术主管'},
                    { value: '技术助理'},
                    { value: '产品经理'},
                    { value: '产品助理'},
                    { value: '产品主管'},
                    { value: '测试员'},
                    { value: '网络管理员'},
                    { value: '网页前端'},
                    { value: '制作经理'},
                    { value: '制作主管'},
                    { value: '制作助理'},
                    { value: '制作人员'},
                    { value: '平面设计师'},
                    { value: '制作售后处理人员'},
                    { value: '培训推广'},
                    { value: '其他'}
                ])
            let options2:Array<{
                value:string
                }> =reactive([
                    { value: '系统管理员'},
                    { value: '业务管理员'},
                    { value: '售后管理员'}
                ])
            
            let dialogVisible = computed(() => {  
                    return props.isshowConlook
            })
            function getSimpleDate(date:any) {
                var date :any= new Date(date);
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    var d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    var h = date.getHours();
                    var minute = date.getMinutes();
                    minute = minute < 10 ? ('0' + minute) : minute;
                    var s = date.getSeconds();
                    s = s < 10 ? '0' + s : s;
                    return y + '-' + m + '-' + d + ' ' ;
                    }
            function handleClose (){
                // console.log(props.rowdata)
                cxt.emit("guanbi")
            }
            let amend  = reactive({})
            function queren(){
                // console.log(value2.value);
                  amend =   {
                    id:props.rowdata.id,
                    username:input1.value,
                    admin:value1.value,
                    staffname:input3.value,
                    depname:value.value,
                    date: getSimpleDate( value2.value),
                    impower:"启用",
                    password:input2.value,
                    zwlb:input4.value
                  }
                cxt.emit("guanbi")
                cxt.emit("close",amend)
            }
            return{
               handleClose,dialogVisible,input1,input2,input3,
               options,value,input4,value1,options1,value2,options2,
               getSimpleDate,queren,amend
            }
        }
   })
 
  </script>
  <style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .useradd_1{
    width: 100%;
    height: 100%;
    display: flex;
  }
  .useradd_2{
    width: 50%;
    height: 100%;
    /* background-color: skyblue; */
  }
  .useradd_3{
    width: 50%;
    height: 100%;
    /* background-color: pink; */
  }
  .demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  margin-top: 10px;
}
  </style>